<!-- 示例核心代码(3/3) -->
<template>
    <div class="default-main ba-table-box">

        <el-drawer
            title="添加景点"
            v-model="Table_data.table.extend!.showInfo"
            size="70%"
            show-close
            :withHeader="false"
        >

            <el-form
                label-width="77px"
                style="margin-top: 30px"
                class="ele-form-search"
                @submit.native.prevent>
                <el-row :gutter="15">
                    <el-col :lg="6" :md="12">
                        <el-form-item label="景点名称:">
                            <el-input
                                v-model="searchParams.name"
                                clearable
                                placeholder="请输入景点名称"/>
                        </el-form-item>
                    </el-col>

                    <el-col :lg="6" :md="12">
                        <el-form-item label="省份名称:">
                            <el-input
                                v-model="searchParams.province_name"
                                clearable
                                placeholder="请输入省份名称"/>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="6" :md="12">
                        <el-form-item label="城市名称:">
                            <el-input
                                v-model="searchParams.city_name"
                                clearable
                                placeholder="请输入城市名称"/>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="6" :md="12">
                        <div class="ele-form-actions">
                            <el-button
                                type="primary"
                                icon="el-icon-Search"
                                class="ele-btn-icon"
                                @click="handleSearch">查询
                            </el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>

            <TableHeader :buttons="[ 'columnDisplay']"
                         :quick-search-placeholder="t('Quick search placeholder', { fields: t('hit.scenic.quick Search Fields') })">
                <template #default>
                    <el-button class="table-header-operate" type="primary" @click="submits" >
                        <Icon color="#ffffff" name="el-icon-DocumentAdd"/>
                        <span class="table-header-operate-text">添加</span>
                    </el-button>
                </template>
            </TableHeader>

            <Table2 ref="tableRef2">
                <template #vip_price>
                    <el-table-column prop="table_name" align="center" width="130" label="会员价格">
                        <template #default="scope">
                            <div v-if="scope.row.vip_price > 0">{{ scope.row.vip_price }}</div>
                            <div v-else>可直接预约</div>
                        </template>
                    </el-table-column>
                </template>
            </Table2>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import {onMounted, inject, provide, ref, watch} from 'vue'
import type baTableClass2 from '/@/utils/baTable'
import baTableClass3 from '/@/utils/baTable'
import {baTableApi} from '/@/api/common'
import {useI18n} from 'vue-i18n'
import TableHeader from '/@/components/table/header/index.vue'
import type {FormInstance, FormItemRule} from 'element-plus'
import createAxios from "/@/utils/axios";

import Table2 from '/@/components/table/index.vue'
import {defaultOptButtons} from '/@/components/table'
import baTableClass from "/@/utils/baTable";
import {ElMessage} from 'element-plus'; // 导入 Element UI 的 Message 组件

const {t} = useI18n()
const Table_data = inject('baTable') as baTableClass2

const tableRef2 = ref()
const optButtons2: OptButton[] = defaultOptButtons([])
const formRef = ref<FormInstance>()
const searchParams = ref({
    name: '',
    province_name: '',
    city_name: ''
});

const baTable = new baTableClass3(
    new baTableApi('/admin/hit.HitScenic/getScenic/'),
    {
        pk: 'id',
        selection: [],
        column: [
            {type: 'selection', align: 'center', operator: false},
            {
                label: "ID",
                prop: 'id',
                align: 'center',
                width: 70,
                sortable: 'custom',
                operator: false
            },
            {label: '景点名称', prop: 'name', align: 'center', sortable: false},
            {label: "封面", prop: 'cover', align: 'center', render: 'image', operator: false},

            {
                label: "价格",
                prop: 'normal_price',
                align: 'center',
                sortable: false,
                operator: false
            },
            {
                label: "会员价格",
                prop: 'vip_price',
                align: 'center',
                sortable: false,
                render: 'slot',
                slotName: 'vip_price',
                operator: false
            },
            {
                label: "所属省份",
                prop: 'province_name',
                align: 'center',
                sortable: false
            },
            {
                label: "所属城市",
                prop: 'city_name',
                align: 'center',
                sortable: false
            },

            {
                label: "地址",
                prop: 'address',
                align: 'center',
                sortable: false,
                showOverflowTooltip: true,
                operator: false
            },
            {
                label: "创建时间",
                prop: 'create_time',
                align: 'center',
                render: 'datetime',
                operator: false,
                sortable: 'custom',
                width: 160,
                timeFormat: 'yyyy-mm-dd hh:MM:ss'
            },
        ],
        dblClickNotEditColumn: [undefined, 'status'],
    },
    {
        defaultItems: {status: '1'},
    }
)


const handleSearch = async () => {
    baTable.table.filter = searchParams.value
    baTable.getIndex()

};


const addHit = () => {

    return createAxios(
        {
            url: '/admin/hit.HitScenic/add',
            method: 'post',
            data: {scenic_ids: baTable.getSelectionIds()}
        },
        {
            showSuccessMessage: true,
            loading: true,
            showCodeMessage: true,
            showErrorMessage: true,
        }
    )
};

const submits = () => {

    addHit().then((res) => {
        Table_data.table.extend!.showInfo = false
        Table_data.onTableHeaderAction('refresh', {})
    })

}


watch(() => Table_data.table.extend!.showInfo, (newVal) => {
    if (newVal) {
        baTable.getIndex()
    }
});


provide('baTable', baTable)

</script>

<style scoped lang="scss">
.info-box {
    margin-top: 60px;

    div {
        width: 100%;
        text-align: center;
    }

    .mt-40 {
        margin-top: 40px;
    }
}
</style>
